<template>
  <div class="bg-white" style="height: calc(100% - 10px)">
    <!-- {{ props.orderSn }}_  -->
    <VTable ref="tableRef" v-bind="tableOptions" class="m-table">
      <template #GoodsSlot="{ row }">
        <ExpandList :show-expand="row?.products?.length > 1" :expand="row.expandStatus" @change="rendererView" :length="row?.products?.length">
          <template #default="{ expand }">
            <div class="product-item" v-for="(item, index) in getRows(row, expand)" :key="`${item.sku}${index}`">
              <div class="border-[#e6e7e9] border-[1px] rounded-[4px] p-[7px] text-[14px] text-[#3A4259] relative leading-[20px] w-[378px]">
                <div>
                  <span class="text-[#3487ff] text-[14px]">{{ item.sku }}</span>
                  <el-divider direction="vertical" />
                  <VText title="自定义SKU" :value="item.custom_sku" :line="2" />
                </div>
                <VText :value="item.sku_cn_title" :line="2" />

                <div class="absolute right-[0] top-[0]">
                  <span class="leading-[17px]"> {{ row.order_currency }} {{ item.original_price }} </span>
                  <span class="bg-[#EBECEE] text-[#FF0000] rounded-bl-[4px] px-[4px] ml-[4px]"> *{{ item.quantity }} </span>
                </div>
              </div>
            </div>
          </template>
        </ExpandList>
      </template>
      <template #empty>
        <img src="~@/assets/images/table-empty.png" alt="" class="h-[160px] w-[260px] m-auto" />
      </template>
    </VTable>

    <Log dialog v-model="logVisible" :autoLoad="false" tag="refund" :business_id="logId" />
    <AddRefund v-model="addVisible" :id="refundId" @close="handleClose" :disabled="refundDisabled" />
  </div>
</template>

<script setup lang="jsx">
import Log from "@/components/Log/index.vue"
import AddRefund from "@/views/user/refund/components/AddRefund/index.vue"
import { getRefundList } from "../api/index"
import { userAuthList } from "@/Auth/user.js"
import { isPermission } from "@/hooks/permission.js"

import ExpandList from "@/components/ExpandList/index.vue"
const getRows = (rows, expand) => {
  rows.expandStatus = expand
  const { products = [] } = rows || {}
  if (expand) return products
  if (!products?.length) return []
  if (products.length > 0 && products.length < 1) {
    return products
  }
  if (!expand) {
    return products?.slice(0, 1)
  }
}

const props = defineProps({
  checkbox: { type: Boolean, default: false },
  params: { type: Object, default: () => ({}) },
  amountData: { type: Object, default: () => ({}) },
  orderSn: { type: String, default: "" },
})
const tableRef = ref()
// 日志
const logId = ref("")
const logVisible = ref(false)
const handleLog = (item) => {
  logId.value = item.id
  logVisible.value = true
}
// 详情
const refundId = ref("")
const refundDisabled = ref(false)
const addVisible = ref(false)
const handleDetail = (item) => {
  refundDisabled.value = true
  refundId.value = item.id
  addVisible.value = true
}
const handleClose = () => {
  refundId.value = ""
  refundDisabled.value = false
}

const handleRefresh = () => {
  tableRef?.value?.commitProxy("query")
}
// 刷新列表 列
const rendererView = (e) => {
  // let columns = tableOptions.columns.concat(tablecColumns.value)
  // tableRef?.value?.$table.loadColumn(columns)
}
import { tablecColumns } from "@/views/user/refund/config.jsx"

const rowStyle = ({ row, column }) => {
  return { height: `${row.expandStatus ? row.products.length * 110 : 130}px` }
}
const tableOptions = reactive({
  showOverflow: true,
  columns: [
    {
      title: "操作",
      width: 70,
      params: "right",
      slots: {
        default: ({ row }) => {
          return (
            <div>
              {isPermission([userAuthList.refund.details]) && (
                <el-button onClick={() => handleDetail(row)} link type="primary">
                  详情
                </el-button>
              )}
              <br />
              {isPermission([userAuthList.refund.log]) && (
                <el-button link type="primary" onClick={() => handleLog(row)}>
                  日志
                </el-button>
              )}
            </div>
          )
        },
      },
    },
  ],
  proxyConfig: {
    props: { result: "data", total: "total" },
    ajax: {
      query: ({ page }) => {
        let param = {
          ...page,
          order_sn: props.orderSn || undefined,
        }
        param.order_sn = param.order_sn ? param.order_sn.split("\n") : []
        return getTab(param)
      },
    },
  },
})
const getTab = async (param) => {
  let columns = tablecColumns.value.concat(tableOptions.columns)
  nextTick(() => {
    tableRef?.value?.$table.loadColumn(columns)
  })
  let res = await getRefundList(param)
  if (res.data.refunds) {
    // API退款 默认值
    res.data.refunds.forEach((item) => {
      item.api_refund_status = ["ebay", "amazon"].includes(item.platform) ? "是" : "否"
    })
    res.data = res.data.refunds
  }
  return res
}

defineExpose({ tableRef })
</script>

<style lang="scss" scoped>
.m-table {
  :deep(.vxe-cell) {
    max-height: 100% !important;
    overflow: visible !important;
  }
  :deep(.vxe-body--column) {
    padding: 8px 0;
  }
}
</style>
